<template>
    <div>

          <!-- 卡片视图区 -->
         <el-card class="main_card">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">   
           <el-tab-pane label="租赁订单管理" name="first">
           <!-- 搜索与添加区 -->
            <el-row :gutter="20"  class="rent_order_search">
                <el-col :span="8"> 
                    <el-input placeholder="请输入内容"  clearable >
                        <el-button slot="append" icon="el-icon-search"  ></el-button>
                    </el-input>
                </el-col>
            </el-row>
            <!-- 订单列表数据 -->
             <el-table  :data="rentalOrderList"  border stripe>
                 <el-table-column label="订单编号" prop="strId"  ></el-table-column>
                 <el-table-column label="商品名称" prop="rentalGoods.name"  ></el-table-column>
                 <el-table-column label="订单总价" prop="orderCost" width="70px">
                      <template v-slot="scope">
                        ￥{{scope.row.orderCost}}
                    </template>
                 </el-table-column>
                 <el-table-column label="租期(天)" prop="" width="70px">
                     <template v-slot="scope">
                        {{scope.row.periodNumber*scope.row.rentalGoods.leasePeriodDays}}
                     </template>
                 </el-table-column>
                 <el-table-column label="收货状态" prop="" width="70px">
                     <template v-slot="scope">
                        <div v-if="scope.row.isReceipt">已收货</div>
                        <div v-else>未收货</div>
                     </template>
                 </el-table-column>
                 <el-table-column label="租赁状态" prop="" width="70px">
                     <template v-slot="scope">
                        <div v-if="scope.row.isReturn">已归还</div>
                        <div v-else>未归还</div>
                     </template>
                 </el-table-column>
                 <el-table-column label="下单时间" prop="receiptTime">
                     <template v-slot="scope">
                        {{scope.row.date | dateFormat}}
                     </template>
                 </el-table-column>
                 <el-table-column label="操作"  width="200px">
                     <template v-slot="scope">
                         <el-button type="primary" icon="el-icon-tickets" circle size="mini" @click="showRBox(scope.row.strId)"></el-button>
                         <el-button type="success" icon="el-icon-location" circle size="mini" @click="showProgress(scope.row.logistics)"></el-button>
                         <el-button type="warning" icon="el-icon-sell" circle size="mini" @click="setReturn(scope.row.strId)" :disabled="scope.row.isReturn"></el-button>
                         <el-button type="danger" icon="el-icon-phone" circle size="mini" @click="urgeUsers" :disabled="scope.row.isReturn"></el-button>
                     </template>
                 </el-table-column>
             </el-table>

              <!-- 分页区 -->
            <el-pagination @size-change="handleRentalSizeChange" @current-change="handleRentalCurrentChange" :current-page="queryInfo.pagenum"
              :page-sizes="[1, 2, 5, 10]"  :page-size="queryInfo.pagesize" layout="sizes, prev, pager, next, jumper" >
            </el-pagination>
           </el-tab-pane> 
           <el-tab-pane label="共享订单管理" name="second">

               <!-- 搜索与添加区 -->
            <el-row :gutter="20" >
                <el-col :span="8"> 
                    <el-input placeholder="请输入内容"  clearable >
                        <el-button slot="append" icon="el-icon-search"  ></el-button>
                    </el-input>
                </el-col>
            </el-row>
             <!-- 订单列表数据 -->
             <el-table  :data="shareOrderList"  border stripe>
                 <el-table-column label="订单编号" prop="strId"  ></el-table-column>
                 <el-table-column label="商品名称" prop="shareGoods.name"  ></el-table-column>
                 <el-table-column label="订单总价" prop="orderCost" width="70px" >
                     <template v-slot="scope">
                        ￥{{scope.row.orderCost}}
                    </template>
                 </el-table-column>
                 <el-table-column label="下单时间" prop="date">
                     <template v-slot="scope">
                        {{scope.row.date | dateFormat}}
                     </template>
                 </el-table-column>
                 <el-table-column label="开始时间" prop="startDate">
                     <template v-slot="scope">
                        {{scope.row.startDate | dateFormat}}
                     </template>
                 </el-table-column>
                 <el-table-column label="结束时间" prop="endDate">
                     <template v-slot="scope">
                        {{scope.row.endDate | dateFormat}}
                     </template>
                 </el-table-column>
                 <el-table-column label="操作"  >
                     <template v-slot="scope">
                         <el-button type="primary" icon="el-icon-tickets" circle size="mini" @click="showSBox(scope.row.strId)"></el-button>
                         <el-button type="success" icon="el-icon-location" circle size="mini" @click="showLocation(scope.row.shareGoods.addressX,scope.row.shareGoods.addressY)"></el-button>
                     </template>
                 </el-table-column>
             </el-table>

              <!-- 分页区 -->
            <el-pagination @size-change="handleShareSizeChange" @current-change="handleShareCurrentChange" :current-page="queryInfo.pagenum"
              :page-sizes="[1, 2, 5, 10]"  :page-size="queryInfo.pagesize" layout="sizes, prev, pager, next, jumper" >
            </el-pagination>
           </el-tab-pane>
          </el-tabs>         
         </el-card>

        <!-- 对话框 -->
        <el-dialog title="详细信息" :visible.sync="rentalDialogVisible" width="50%" :close-on-click-modal="false" >
            <!-- 内容主体区 -->
            <el-collapse v-model="activeRDetails" >
                <el-collapse-item title="订单详情" name="1">
                   <div class="collapse_text"><h3>订单号:</h3><p>{{rentalDetail.strId}}</p></div> 
                   <div class="collapse_text"><h3>订单总价:</h3><p>{{rentalDetail.orderCost}}</p></div> 
                   <div class="collapse_text"><h3>租赁数:</h3><p>{{rentalDetail.periodNumber*rentalDetailGood.leasePeriodDays}}</p></div> 
                   <div class="collapse_text"><h3>下单时间:</h3><p>{{rentalDetail.date | dateFormat}}</p></div> 
                   <div class="collapse_text"><h3>收货时间:</h3><p>{{rentalDetail.receiptTime | dateFormat}}</p></div> 
                   <div class="collapse_text"><h3>归还时间:</h3><p>{{rentalDetail.returnTime | dateFormat}}</p></div> 
                </el-collapse-item>
                <el-collapse-item title="商品信息" name="2">
                    <div class="collapse_text"><h3>商品ID:</h3><p>{{rentalDetailGood.strId}}</p></div> 
                    <div class="collapse_text"><h3>商品名:</h3><p>{{rentalDetailGood.name}}</p></div> 
                    <div class="collapse_text"><h3>商品库存:</h3><p>{{rentalDetailGood.inventory}}</p></div> 
                    <div class="collapse_text"><h3>商品总价:</h3><p>{{rentalDetailGood.totalPrice}}</p></div> 
                    <div class="collapse_text"><h3>租赁设置:</h3><p>{{rentalDetailGood.leasePeriodDays}}天</p></div> 
                </el-collapse-item>
                <el-collapse-item title="买家信息" name="3">
                    <div class="collapse_text"><h3>收货人:</h3><p>{{rentalDetailRecipient.name}}</p></div> 
                    <div class="collapse_text"><h3>收货地址:</h3><p>{{rentalDetailRecipient.address}}</p></div> 
                    <div class="collapse_text"><h3>联系方式</h3><p>{{rentalDetailRecipient.telephone}}</p></div> 
                </el-collapse-item>
            </el-collapse>    
        </el-dialog>

         <!-- 展示进度的对话框 -->
        <el-dialog title="物流进度" :visible.sync="progressDialogVisible" width="50%" :close-on-click-modal="false" >
            <!-- 内容主体区 -->
           <el-timeline >
                <el-timeline-item v-for="(activity, index) in progressInfo" :key="index" :timestamp="activity.date | dateFormat">
                {{activity.des}}
                </el-timeline-item>
            </el-timeline>
    
        </el-dialog>

        <!-- 对话框 -->
        <el-dialog title="详细信息" :visible.sync="shareDialogVisible" width="50%" :close-on-click-modal="false" >
            <!-- 内容主体区 -->
            <el-collapse v-model="activeRDetails" >
                <el-collapse-item title="订单详情" name="1">
                   <div class="collapse_text"><h3>订单号:</h3><p>{{shareDetail.strId}}</p></div> 
                   <div class="collapse_text"><h3>订单总价:</h3><p>{{shareDetail.orderCost}}</p></div> 
                   <div class="collapse_text"><h3>下单时间:</h3><p>{{shareDetail.date | dateFormat}}</p></div> 
                   <div class="collapse_text"><h3>起始时间:</h3><p>{{shareDetail.startDate | dateFormat}}</p></div> 
                   <div class="collapse_text"><h3>结束时间:</h3><p>{{shareDetail.endDate | dateFormat}}</p></div> 
                </el-collapse-item>
                <el-collapse-item title="商品信息" name="2">
                    <div class="collapse_text"><h3>商品ID:</h3><p>{{shareDetailGood.strId}}</p></div> 
                    <div class="collapse_text"><h3>商品名:</h3><p>{{shareDetailGood.name}}</p></div>  
                    <div class="collapse_text"><h3>租赁设置:</h3><p>￥{{shareDetailGood.moneyPerHour}}/时</p></div> 
                </el-collapse-item>
                <el-collapse-item title="使用者信息" name="3">
                    <div class="collapse_text"><h3>使用者:</h3><p>{{shareDetailRecipient.name}}</p></div> 
                    <div class="collapse_text"><h3>联系方式</h3><p>{{shareDetailRecipient.telephone}}</p></div> 
                </el-collapse-item>
            </el-collapse>    
        </el-dialog>


        <el-dialog :visible.sync="locationShow" destroy-on-close>
             <div id="location" ></div>
        </el-dialog>
    </div>
</template>

<script>
import cityData from './citydata.js';

export default {
    data(){
        return{
            activeName:"first",
            activeRDetails:['1'],
            queryInfo:{
                pagenum:1,
                pagesize:10
            },
            rentalDetail:{},
            rentalDetailGood:{},
            rentalDetailRecipient:{},
            rentalOrderList:[],
            rentalDialogVisible:false,
            cityData,
            progressDialogVisible:false,
            progressInfo:[],
            shareOrderList:[],
            shareDetail:{},
            shareDetailGood:{},
            shareDetailRecipient:{},
            shareDialogVisible:false,
            locationShow:false
        }
    },
    created(){
        this.getRentalOrderList();
    },
    methods:{
        async getRentalOrderList(){
           const {data:res}=await this.$http.get('rent/RentalOrder/findByMerchantID/1/'+this.queryInfo.pagesize+'/'+this.queryInfo.pagenum);
           if(res.code!=200)
            return this.$message.error("获取订单列表失败!");     
            console.log(res);
           this.rentalOrderList=res.data.data;
        },
        async getShareOrderList(){
            const {data:res}=await this.$http.get('rent/shareOrder/findByMerchantID/1/'+this.queryInfo.pagesize+'/'+this.queryInfo.pagenum);
           if(res.code!=200)
            return this.$message.error("获取订单列表失败!");
          console.log(res);
           this.shareOrderList=res.data.data;
        },
       // 监听页码size改变
        handleRentalSizeChange(newSize){
            this.queryInfo.pagesize=newSize;
            this.getRentalOrderList();
        },
        // 监听页码值改变
        handleRentalCurrentChange(newPage){
            this.queryInfo.pagenum=newPage;
           this.getRentalOrderList();
        },
        // 监听页码size改变
        handleShareSizeChange(newSize){
            this.queryInfo.pagesize=newSize;
            this.getShareOrderList();
        },
        // 监听页码值改变
        handleShareCurrentChange(newPage){
            this.queryInfo.pagenum=newPage;
           this.getShareOrderList();
        },
        async showRBox(id){
            this.rentalDialogVisible=true;
            const {data:res}=await this.$http.get('rent/RentalOrder/findByID/'+id);
            console.log(res.data)
            this.rentalDetail=res.data;
            this.rentalDetailGood=res.data.rentalGoods;
            this.rentalDetailRecipient=res.data.recipient;
        },
        async showSBox(id){
            this.shareDialogVisible=true;
            const {data:res}=await this.$http.get('rent/shareOrder/findByID/'+id);
            console.log(res.data)
            this.shareDetail=res.data;
            this.shareDetailGood=res.data.shareGoods;
            this.shareDetailRecipient=res.data.recipient;
        },
        setReturn(id)
        {
            this.$confirm('是否确认商品已归还', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(async () => {
            const{data:res}=await this.$http.get('rent/RentalOrder/setReturn/'+id)
            console.log(res)
            if(res.code==200)
            {
            this.$message({
            type: 'success',
            message: '设置成功!'
          });
            }
        }).catch(() => {
    
        });
        },
        urgeUsers()
        {
            this.$message.success("已催促用户归还。")
        },
        handleClick(tab,event)
        {
            if(tab.name=='second')
            {
                this.getShareOrderList();
            }else{
                this.getRentalOrderList();
            }
        },
        showProgress(logistics){

            this.progressDialogVisible=true;
            this.progressInfo=logistics;
        },
        showLocation(x,y)
      {
        
        this.locationShow=!this.locationShow;
        var that=this;
        this.$nextTick(()=>{
        
            var position = document.getElementById("location");

            var center = new TMap.LatLng(x, y);//设置中心点坐标
            //初始化地图
            var map = new TMap.Map("location", {
                center: center
            });
            
            var marker = new TMap.MultiMarker({
            id: "marker-layer", //图层id
            map: map,
            styles: { //点标注的相关样式
                "marker": new TMap.MarkerStyle({
                    "width": 25,
                    "height": 35,
                    "anchor": { x: 16, y: 32 },
                    "src": "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png"
                })
            },
            geometries: [{ //点标注数据数组
                "id": "demo",
                "styleId": "marker",
                "position": new TMap.LatLng(x, y),
                "properties": {
                    "title": "marker"
                }
            }]
            
        });

        
        })
      }
    }
}
</script>



<style scoped lang="less">
.el-dropdown
{
    float: right;
    top:-30px;
}
.el-cascader
{
    width:100%;
}
.el-table{
    font-size: 12px;
    margin-top: 15px;
}
 .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
.el-collapse-item
{
    div
    {
        display: flex;
        p{
        line-height: 30px;
        margin-left: 8px;
        }
    }
}
</style>